<template>
	<view class="box">
		<!-- 场次信息 -->
		<view class="box_info">
			<text>{{name}}</text>
			<view class="box_info_date">
				<image src="/static/icon/order_ic_date.png"></image>
				<text>{{date}}</text>
			</view>
			<view class="box_info_item" v-for="(item,index) in list" :key="index">
				<view class="box_info_item_a">
					<text>{{item.siteModelName}}</text>
					<text>{{item.beginTime}}-{{item.endTime}}</text>
				</view>
				<view class="box_info_item_b"><text>￥{{item.price}}</text></view>
				<image
					:src="item.isSelect?'/static/images/order_ic_choose_select.png':'/static/images/order_ic_choose.png'"
					class="box_info_item_c" />
			</view>
		</view>
		<view class="box_info mt30">
			<text>更换场地</text>
			<view class="box_info_item" v-for="(item,index) in listb" :key="index">
				<view class="box_info_item_a">
					<text>{{item.siteModelName}}</text>
					<text>{{item.beginTime}}-{{item.endTime}}</text>
				</view>
				<view class="box_info_item_b"><text>￥{{item.price}}</text></view>
				<view class="box_info_item_del" @click="deleteReserve(item, index)">删除</view>
			</view>
			<view class="add_cd" @click="addCd">添加场地</view>
		</view>
		<view class="box_content">
			<view class="bt">预定人员</view>
			<view class="flex-cb liCnt">
				<view class="left">
					姓名
				</view>
				<input disabled v-model="ydname" />
				<view class="quan"></view>
			</view>
			<view class="flex-cb liCnt">
				<view class="left">
					姓名
				</view>
				<input disabled v-model="ydtel" />
				<view class="quan"></view>
			</view>
			<view class="flex-cb liCnt">
				<view class="left">
					备注
				</view>
				<input disabled v-model="des" />
				<view class="quan"></view>
			</view>
		</view>
		<!-- 订场须知 -->
		<view class="box_xz">
			<text>订场须知</text>
			<u-parse :content="dcxz"></u-parse>
		</view>
		<!-- 展位 -->
		<view class="seizeAseat"></view>
		<!-- 底部总金额+提交 -->
		<view class="box_active_footer">
			<view class="box_active_footer_btn" @click="submit">立即更换</view>
		</view>
	</view>
</template>

<script>
	import {
		getYMDHMS
	} from '@/utils/utils';
	export default {
		data() {
			return {
				id: '',
				siteId: '', //订单id
				date: '',
				list: [],
				listb: [],
				idList: [],
				show: false,
				name: uni.getStorageSync('venueName'), //场馆名称
				ydtel: '',
				ydname: '',
				des: '',
				cqid: '',
				xmid: '',
				title: '',
				dcxz: ''
			};
		},
		onLoad(options) {
			this.siteId = options.siteId
			this.cqid = options.cqid
			this.xmid = options.xmid
			this.title = options.title
			this.siteReserve()
			this.getDate()
			this.getYx()
			uni.$on('callback', (res) => {
				console.log(res, '更新');
				this.siteId = res.siteId
				this.title = res.title
				this.xmid = res.xmid
				this.cqid = res.cqid
				this.listb = res.listb
				this.idList = res.idList
			})
		},
		onUnload() {
			uni.$off('callback');
		},
		methods: {
			addCd() {
				let ghcd = true
				uni.navigateTo({
					url: `/pages/fieldArea/fieldArea?ghcd=${ghcd}&title=${this.title}&xmid=${this.xmid}&cqid=${this.cqid}&siteId=${this.siteId}`
				})
			},
			deleteReserve(e, index) {
				let listb = [...this.listb]
				let idList = [...this.idList]
				listb.splice(index, 1)
				idList.splice(index, 1)
				this.listb = listb
				this.idList = idList
			},
			siteReserve() {
				this.$app.ajax({
					data: {
						param: {
							siteId: this.siteId
						}
					},
					api: this.$api.siteReserve()
				}).then((res) => {
					let list = res.record.siteList
					list.forEach((s) => {
						s.isSelect = true
					})
					this.list = list
					this.id = res.record.id
					this.des = res.record.remarks
					this.ydname = res.record.userType == '0' ? res.record.memberName : res.record.userName
					this.ydtel = res.record.userType == '0' ? res.record.memberPhone : res.record.userPhone
					this.hyid = res.record.memberId
				})
			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_BOOKING_SITE'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					this.dcxz = res.recordList[0].value
				})
			},
			// 获取日期
			getDate() {
				let date = new Date();
				let nnn = date.getFullYear()
				let yyy = date.getMonth() + 1
				let rrr = date.getDate()
				let xq = date.getDay()
				let data = ''
				switch (xq) {
					case 1:
						data = '周一'
						break;
					case 2:
						data = '周二'
						break;
					case 3:
						data = '周三'
						break;
					case 4:
						data = '周四'
						break;
					case 5:
						data = '周五'
						break;
					case 6:
						data = '周六'
						break;
					case 0:
						data = '周日'
						break;
				}
				let res = nnn + '年' + yyy + '月' + rrr + '日' + ' ' + data
				this.date = res
			},

			// 提交订单
			submit() {
				console.log(2231, this.idList)
				let arr = [...this.list]
				let list = []
				let siteIds = []
				arr.forEach((s) => {
					if (s.isSelect) {
						list.push(s)
					} else {
						siteIds.push(s.id)
					}
				})
				if (list.length === 0) return uni.showToast({
					title: '请选择需要更换场地',
					icon: 'none',
					duration: 2000
				})
				console.log(3231, this.idList, list)
				if (this.idList.length != list.length) return uni.showToast({
					title: '更换场地应与原场地数量保持一致',
					icon: 'none',
					duration: 2000
				})

				this.$app.ajax({
					data: {
						param: {
							reserveAndOrderId: this.id,
							siteIds: [...siteIds, ...this.idList]
						}
					},
					api: this.$api.changeReserve()
				}).then(res => {
					if (res.errorCode == '000000') {
						uni.showToast({
							title: '换场成功',
							icon: 'success',
							duration: 2000,
							mask: true,
							success(res) {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									})
								}, 1000)
							}
						})
					}
				})
			},
			hyClick() {
				if (!this.hytel) return uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 2000
				})
				this.$app.ajax({
					data: {
						param: {
							phoneOrNo: this.hytel
						}
					},
					api: this.$api.VIPInfo()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.hyname = res.record.nickName
						this.hyIdCard = res.record.number
						this.hyid = res.record.id
					}
				}).catch(err => {
					console.log(err)
				})
			},
			onChange(e) {
				this.hklx = e
			},
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.box_info {
		background: #ffffff;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.box_info text:nth-child(1) {
		font-size: 30rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_info_date {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.box_info_date text {
		font-size: 26rpx;
		font-weight: 400;
		color: #4167C1;
	}

	.box_info_date image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}

	.box_info_item {
		padding: 30rpx;
		border-radius: 10rpx;
		background: #F7F7F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.box_info_item_a text:nth-child(1) {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.box_info_item_a text:nth-child(2) {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 30rpx;
	}

	.box_info_item_b text {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.box_info_item_c {
		width: 36rpx;
		height: 36rpx;
	}

	.box_info_item_del {
		font-size: 26rpx;
		font-weight: 400;
		color: #DD5040;
	}

	.add_cd {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4167C1;
		width: 100%;
		line-height: 1.5;
		margin-top: 20rpx;
		text-align: center;
	}

	.box_mode {
		background: #ffffff;
		padding: 30rpx 30rpx 0rpx 30rpx;
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.box_mode_title text {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_mode_s {
		padding: 34rpx 0;
		display: flex;
		border-bottom: 1px solid #E5E5E5;
		justify-content: space-between;
	}

	.box_mode .box_mode_s:last-child {
		border: none !important;
	}

	.weui-cell__bd {
		display: flex;
	}

	.weui-cell__bd image {
		width: 40rpx;
		height: 40rpx;
	}

	.weui-cell__bd text:nth-child(2) {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 24rpx;
	}

	.weui-cell__bd text:nth-child(3) {
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		margin-left: 24rpx;
	}

	.red {
		color: #DD5040;
	}

	.box_xz {
		padding: 30rpx;
		margin-top: 24rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.box_xz text:nth-child(1) {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		margin-bottom: 24rpx;
	}

	.box_xz text {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 15rpx;
	}

	.seizeAseat {
		height: 120rpx;
	}

	.box_active_footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		z-index: 10;
	}

	.box_active_footer_btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #4167C1;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}



	.weui-cell__hd {
		display: flex;
		align-items: center;
	}

	.my-icon {
		margin-right: 10rpx;
	}

	.time_js {
		margin-top: 5rpx;
	}

	.van-count-down {
		color: #DD5040 !important;
		font-size: 26rpx !important;
	}

	.pwd_box {
		padding: 30rpx 0 0 0;
		box-sizing: border-box;
		width: 600rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pwd_box_title {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 15rpx;
	}

	.pwd_box_input {
		width: 90%;
		height: 90rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #ececec;
		margin-top: 40rpx;
	}

	.pwd_box_input input {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.pwd_box_footer {
		display: flex;
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;
		border-top: 1rpx solid #ececec;
	}

	.pwd_box_footer_qx {
		flex: 1;
		height: 100%;
		font-size: 29rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #ececec;
	}

	.pwd_box_footer_qd {
		flex: 1;
		color: #DD5040;
		font-size: 29rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box_active_footer_money text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.box_active_footer_money text:nth-child(2) {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 16rpx;
	}

	.reds {
		font-size: 32rpx !important;
		font-weight: 600 !important;
		color: #DD5040 !important;
		margin-left: 0 !important;
	}

	.van-radio-group--horizontal {
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin: 0 auto;
	}

	.box_content {
		background: #ffffff;
		padding: 30rpx 0 0;
		margin-top: 30rpx;
	}

	.box_content .bt {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		margin-bottom: 24rpx;
		padding-left: 30rpx;
	}

	.custom-icon {
		color: #4167C1;
	}

	.liCnt {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F7F7F7;
		position: relative;

		.left {
			width: 5em;
			flex: none;
		}

		.quan {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}

		input {
			font-size: 28rpx;
			flex: 1;
			background: none;
		}
	}
</style>